<template>
  <div class="module1">
    <el-row :gutter="20">
      <el-col :span="8" class="box">
        <dv-border-box-11 title="折线图"
          ><div class="dv11box">
            <!-- 折线图 -->
            <LineChart
              :chartData="lineChartData"
              height="100%"
            ></LineChart></div
        ></dv-border-box-11>
      </el-col>
      <el-col :span="8" class="box">
        <dv-border-box-11 title="饼图"
          ><div class="dv11box">
            <!-- 饼图 -->
            <PieChart
              :PieChartData="PieChartData"
              height="100%"
            ></PieChart></div
        ></dv-border-box-11>
      </el-col>
      <el-col :span="8" class="box">
        <dv-border-box-11 title="雷达图"
          ><div class="dv11box">
            <!-- 雷达图 -->
            <RadarChart height="100%"></RadarChart></div
        ></dv-border-box-11>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8" class="box">
        <dv-border-box-11 title="条形图"
          ><div class="dv11box">
            <!-- 条形图 -->
            <BarChart
              :BarChartData="BarChartData"
              height="100%"
            ></BarChart></div
        ></dv-border-box-11>
      </el-col>
      <el-col :span="8" class="box">
        <dv-border-box-11 title="dv-border-box-11"
          ><div class="dv11box">dv-border-box-11</div></dv-border-box-11
        >
      </el-col>
      <el-col :span="8" class="box">
        <dv-border-box-11 title="dv-border-box-11"
          ><div class="dv11box">dv-border-box-11</div></dv-border-box-11
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './LineChart.vue'
import PieChart from './PieChart.vue'
import RadarChart from './RadarChart.vue'
import BarChart from './BarChart.vue'

export default {
  components: { LineChart, PieChart, RadarChart, BarChart },
  data () {
    return {
      // 折线图的数据
      lineChartData: {
        time: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
        data: [56, 49, 45, 44, 46, 44, 49]
      },
      // 饼图的数据
      PieChartData: [
        { value: 100, name: '浙江' },
        { value: 200, name: '河南' },
        { value: 300, name: '山东' },
        { value: 400, name: '安徽' },
        { value: 500, name: '北京' }
      ],
      // 雷达图数据

      // 条形图数据
      BarChartData: {
        time: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
        data: [56, 49, 45, 44, 46, 44, 49]
      }
    }
  },
  created () {
    console.log('111')
  }
}
</script>

<style lang="scss">
.dv-border-box-11 .border-box-content {
  padding: 2vh;
  padding-top: 7vh;
}
.module1 {
  .box {
    height: 43vh;
    .dv11box {
      width: 94%;
      height: 80%;
      background-color: aqua;
      margin: 2vh;
      margin-top: 6vh;
    }
  }
}
</style>
